<template>
	<div class="detail" v-if="orderInfo">
		<!-- <div class="status">
			{{ orderInfo.status_text }}
		</div> -->

		<div class="space"></div>

		<div class="address">
			<div class="icon"><van-icon name="location-o" /></div>
			<div class="info">
				<div class="top">
					<span class="name">{{ orderInfo.address.consignee }}</span>
					<span class="mobile">{{ orderInfo.address.mobile }}</span>
				</div>
				<div class="address-text">{{ orderInfo.address.region_text + orderInfo.address.address }}</div>
			</div>
		</div>

		<div class="space"></div>

		<div class="content-box">
			<div class="header">
				<span class="icon"><van-icon name="bag" /></span>
				<span class="name">商品信息</span>
			</div>
			<div class="body">
				<van-card
					v-for="item in orderInfo.productList"
					:key="item.id"
					class="product-card"
          @click="$router.push('/product/info?proid=' + item.products.id)"
					:price="item.total"
					:num="item.pronum"
					:title="item.products.name"
					:thumb="item.products.thumbs_text[0]">
					<template #price-top>
						<p class="unit-price">{{ '单价：￥' + item.price }}</p>
					</template>
					<template #price>
						<span class="price"><span>￥</span>{{ item.total }}</span>
					</template>
				</van-card>
			</div>
			<div class="footer">
				<span>
					共 <span class="nums">{{ orderInfo.productList.length }} </span>件商品，总价：<span class="price"
						><span>￥</span>{{ orderInfo.amount }}</span
					>
				</span>
			</div>
		</div>

		<div class="space"></div>

		<div class="content-box">
			<div class="header">
				<span class="icon"><van-icon name="notes" /></span>
				<span class="name">订单信息</span>
			</div>
			<div class="body">
				<van-cell-group>
					<van-cell title-class="title-1" title="订单编号" :value="orderInfo.code" />
					<van-cell title-class="title-1" title="订单状态" :value="orderInfo.status_text" />
					<van-cell title-class="title-1" title="下单时间" :value="orderInfo.create_time_text" />
					<van-cell
            v-if="expressName"
						title-class="title-1"
						title="快递公司"
						:value="expressName" />
					<van-cell
            v-if="expressCode"
						title-class="title-1"
						title="快递单号"
						:value="expressCode" />
				</van-cell-group>
        <van-cell v-if="Number(orderInfo.status) === -3" title-class="title-1" title="退货原因" :value="orderInfo.refundreason" />
        <van-cell v-if="Number(orderInfo.status) === -5" title-class="title-1" title="商家拒绝原因" :value="orderInfo.examinereason" />
			</div>
		</div>
	</div>
</template>

<script setup>
const { proxy } = getCurrentInstance();
const business = proxy.$cookies.get('business');
const orderid = ref(proxy.$route.query.orderid);
const orderInfo = ref(null);

const getData = async () => {
	const res = await proxy.$GET({
		url: '/order/info',
		params: { busid: business.id, orderid: orderid.value },
	});

	console.log(res);

	if (res.code === 0) {
		proxy.$fail(res.msg);
		return;
	}

	orderInfo.value = res.data;
};

const expressName = computed(() => {
  const status = Number(orderInfo.status)

  if (status === 1) {
    return '未发货'
  } else if (status === 2) {
    return orderInfo.express.name
  } else {
    return false
  }
})

const expressCode = computed(() => {
  const status = Number(orderInfo.status)

  if (status === 1) {
    return '未发货'
  } else if (status === 2) {
    return orderInfo.expresscode
  } else {
    return false
  }
})


getData();
</script>

<style scoped lang="scss">
.detail {
	.status {
		padding: 10px;
		background-color: #4f96e0;
		text-align: center;
		color: #fff;
		font-size: 16px;
		font-weight: 700;
	}

	.address {
		display: flex;
		padding: 10px 10px;
		background-color: #fff;
		.icon {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 30px;
			font-size: 20px;
			:deep(i) {
				transform: translateY(-6px);
			}
		}
		.info {
			.top {
				vertical-align: bottom;
				margin-bottom: 6px;
				.name {
					font-size: 16px;
					font-weight: 700;
					margin-right: 16px;
				}
				.mobile {
					font-size: 14px;
					color: #666;
				}
			}
			.address-text {
				font-size: 14px;
				color: #999;
				margin-bottom: 10px;
			}
		}
	}

	.content-box {
		background-color: #fff;
		.header {
			border-bottom: 1px solid #eee;
			padding: 6px 10px;
			.icon {
				font-size: 16px;
				padding: 4px;
				color: #4f96e0;
			}
			.name {
				color: #555;
				font-size: 13px;
			}
		}
		.body {
			// padding: 0 10px;
		}

		.footer {
			text-align: end;
			border-top: 1px solid #eee;
			padding: 10px;
			font-size: 13px;
			.price {
				font-size: 15px;
				font-weight: 700;
				color: #e03737;
				span {
					font-size: 12px;
				}
			}
			.nums {
				color: #e03737;
				font-weight: 700;
			}
		}
	}

	.product-card {
		background-color: #fff;
		.unit-price {
			font-size: 12px;
			color: #999;
		}
		.price {
			font-size: 15px;
			font-weight: 700;
			color: #e03737;
			span {
				font-size: 12px;
			}
		}
	}

	:deep(.title-1) {
		flex: 0.5;
		// width: 100px;
	}
}
</style>
